<template>
<div class="app" style="border: solid 1px #ecedf0;">
    <div class="app_top">
        <h3 class="app_top_h">项目成员</h3>
        <div @click="memberAdd">
            <i class="el-icon-plus"></i>
        </div>
    </div>
    <div class="app_conter">
        <div class="app_conter_app"  v-for="item in memList.userList" @mouseover=mouseoverclick(item) @mouseout="mouseoutclick">
            <div class="app_conter_app_left">
             <el-image style="width:25px;height:25px;border-radius:50%" :src="item.avatar?item.avatar:'https://img1.baidu.com/it/u=3409216862,2183886582&fm=26&fmt=auto&gp=0.jpg'"></el-image>
             <span class="app_conter_name">{{item.userName}}</span>
            </div>
            <!-- <el-button  @click="addtask" v-show="buttonshow==item" style="height:30px" size="mini">+任务</el-button> -->
        </div>
    </div>

</div>
</template>
<script>
 export default({
     props: ['projectform'],
     watch: {
      projectform: {
      handler(val, oldval) {
        this.memList = val;
      },
      // 深度观察监听
      deep: true,
      immediate: true,
    },
     },
     data () {
         return {
             buttonshow:-1,
             memList:[]
         }
     },
     methods: {
         addtask(){
               this.$router.push({
                 path:'/task/add',
             })
         },
         mouseoutclick(){
             this.buttonshow=-1
         },
         mouseoverclick(data){
             this.buttonshow=data
         },
         memberAdd(){
             this.$emit('memberAdd')
         },
     }
 })
</script>
 <style scoped>
 .app{
     width: 100%;
        /* border: solid 1px #ecedf0; */
        padding:14px;

 }
.app_top{
    display: flex;
    justify-content: space-between;
}
.app_top_h{
    margin:0px
}
.el-icon-plus{
    color: rgb(32, 160, 255);
    cursor: pointer;
}
.app_conter{
    margin-top: 20px;
}
.app_conter_app{
    display: flex;
    /* align-items: center; */
    height: 50px;
    justify-content: space-between;
}
.app_conter_app_left{
    height: 30px;
    display: flex;
    align-items: center;
}
.app_conter_name{
    font-size: 14px;
    margin-left: 10px;
}
.ge_content_app{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;

}
.ge_content_app_left{
    flex: 7;

}
.ge_content_app_content{
    flex: .5;
}
.ge_content_app_right{
    flex: 3;
}

</style>
